<template>
  <div ref="editorElem" style="text-align: left"></div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";
export default {
  data() {
    return {
      editor: null,
      editorData: "",
    };
  },
  props: {
    editorContent: {
      type: String,
      default: "",
    },
  },
  watch: {
    editorContent() {
      this.editor.txt.html(this.editorContent);
    },
  },
  mounted() {
    const editor = new wangEditor(this.$refs.editorElem);
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
      this.$emit("onEditor", this.editorData);
    };
    // 创建编辑器
    editor.create();
    this.editor = editor;
  },
  methods: {},
};
</script>

<style lang="less" scope>
</style>